<template>
    <div class="manageblog">
        <div class="manageblog_setting">
            <div class="manageblog_setting__msginfo">
                <div>
                    <div class="manageblog_setting__msginfo--title">
                        Reading
                    </div>
                    <div class="manageblog_setting__msginfo--num">
                        {{ blog_info.reading }}
                    </div>
                </div>
                <div>
                    <div class="manageblog_setting__msginfo--title">
                        Article&nbsp;&nbsp;&nbsp;
                    </div>
                    <div class="manageblog_setting__msginfo--num">
                        {{ blog_info.article }}<span @click="writeBlog">+</span>
                    </div>
                </div>
                <div>
                    <div class="manageblog_setting__msginfo--title">
                        Worlds&nbsp;&nbsp;
                    </div>
                    <div class="manageblog_setting__msginfo--num">
                        {{ blog_info.worlds }}
                    </div>
                </div>
            </div>
            <div class="manageblog_setting__color_block"></div>
        </div>
        <div class="wrap_timeline">
            <time-line></time-line>
        </div>
    </div>
</template>

<script setup>
import { inject, onMounted, reactive, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import TimeLine from "./TimeLine.vue";

//获取屏幕高度
const screen_height = ref();
onMounted(() => {
    var height =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight; //兼容性获取屏幕高度
    screen_height.value = height;

    window.onresize = () => {
        return (() => {
            screen_height.value =
                window.innerHeight ||
                document.documentElement.clientHeight ||
                document.body.clientHeight; //兼容性获取屏幕高度
        })();
    };
});

// 跳转到写入
const rotate = useRouter();
const writeBlog = async () => {
    await rotate.push("/blog-editor/");
};

// 获取blog信息
// 获取对应的blog
const storeEP = inject("storeEP");
const axios = inject("axios")
const store_data = storeEP.state;
const blog_list = ref();
const getBlogs = async () => {
    let headers = {
        authorization: store_data.token,
    };
    let res_data = await axios.post("/blog/user", "", { headers: headers });
    blog_list.value = res_data.data;
    console.log(blog_list.value);
};
// blog信息
onMounted(async () => {
    await getBlogs();
    getBlog_info()
});

// 获取blog信息
const blog_info = reactive({
    reading: 10,
    article: null,
    worlds: 10,
});
function getBlog_info() {
    blog_info.article = Object.keys(blog_list.value).length
    blog_info.worlds = getWords()
}

// 获取总词数
function getWords() {
    let word_count = 0;
    for (let i of blog_list.value) {
        word_count += i.blog_words
        // console.log(word_count);
    }
    return word_count;
}

</script>

<style lang="scss" scoped>
.manageblog {
    z-index: -1;
    .manageblog_setting {
        position: absolute;
        width: 100%;
        .manageblog_setting__msginfo {
            white-space: nowrap;
            padding: 80px 0 0 200px;
            user-select: none;
            div {
                display: flex;
            }
            .manageblog_setting__msginfo--num {
                margin-top: -50px;
                text-align: left;
                font-weight: 1000;
                font-size: 140px;
                span {
                    color: #c8c8c8;
                    font-size: 90px;
                    font-weight: 900;
                }
                span:hover {
                    color: var(--main-color-b);
                }
            }
            .manageblog_setting__msginfo--title {
                font-size: 30px;
                font-weight: 100;
                line-height: 100px;
                color: #000000;
            }
        }
        .manageblog_setting__color_block {
            width: 100%;
            height: 2px;
            background-color: var(--main-color-b);
        }
    }
}
</style>
